<template>
    <div class="header-tab">
        <div :class="TabModel.IsHome ? 'tab-active tool-item' : 'tool-item '" title="首页"
            @click="TabModel.CheckedTab({ name: '首页', icon: 'el-icon-house', path: '/Dashboard' })">
            <i class="el-icon-house"></i>
        </div>
        <div class="tool-item-border-left tool-item" @click="ScrollTabToLeft()">
            <i class="el-icon-d-arrow-left"></i>
        </div>
        <div class="header-tab-scroll" ref="scrollContainer">
            <div :class="item.active ? 'tab-active header-tab-item' : 'header-tab-item'" v-for="item in TabList"
                @click="TabModel.CheckedTab(item)">
                <i :class="item.icon"></i>
                {{ item.name }}
                <i class="tab-close el-icon-close" @click.stop="TabModel.CloseTab(item)"></i>
            </div>
        </div>
        <div class="tool-item-border-right tool-item" @click="ScrollTabToRight()">
            <i class="el-icon-d-arrow-right"></i>
        </div>
        <div class="tool-item" @click="TabModel.CloseAllTab()" title="关闭全部">
            <i class="el-icon-close"></i>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            ScrollAmount:100
        }
    },
    methods: {

        ScrollTabToRight() {
            this.$refs.scrollContainer.scrollLeft += this.ScrollAmount;
        },

        ScrollTabToLeft() {
            this.$refs.scrollContainer.scrollLeft -= this.ScrollAmount;
        },


    //智能滚动
    AutoScroll(){
        let TabContainer  =this.$refs.scrollContainer;
        if(TabContainer){
            //找到当前选择的tab
            let index = this.TabList.findIndex(x=>x.active);


            //智能滚动，找到选中的元素，获取选中元素前面的每一个元素宽度和当前元素的宽度，然后滚动
            setTimeout(() => {
                let scrollSum=0.0;
                for(let i=0;i< TabContainer.children.length;i++){
                    if(i<=index){
                        scrollSum+=TabContainer.children[i].clientWidth;
                    }
                }
                TabContainer.scrollLeft = scrollSum - 100;
            }, 0);
        }
    }
    },
    computed: {
        TabModel() {
            return this.$store.state.TabModel;
        },
        TabList(){
            return this.$store.state.TabModel.TabList;
        }
    },
    watch:{

        //监听Tab  发生改变立刻滚动
        TabList(){
            this.AutoScroll();
        }
    }
}
</script>
<style scoped>
.header-tab {
    height: 36px;
    display: flex;
    background-color: white;
    border-bottom: 2px solid white;
    border-top: 2px solid #f8f8f8;
}

.header-tab-scroll {
    flex: 1;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    scroll-behavior: smooth;
    background-color: #f8f8f8;
}

.header-tab-item {
    height: calc(100% - 4px);
    padding-left: 15px;
    margin-left: 4px;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;

}

.header-tab-item:not(.tab-active):hover {
    color: var(--hover);
}

.header-tab-item:hover .tab-close {
    color: inherit;
}

.header-tab-item i {
    margin-right: 5px;
    font-size: 13px;
}

.tab-active {
    background-color: var(--hover);
    color: white;
}

.tab-close {
    font-size: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: transparent;
}

.tool-item {
    width: 36px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    margin: 0 1px;
    border: 1px solid #e5e7eb;
}

/* .tool-item-border-left {
    border-left: 1px solid #e5e7eb;
}

.tool-item-border-right {
    border-right: 1px solid #e5e7eb;
} */

.tool-item:hover {
    background-color: #f1f1f1;
}
</style>